<template>
  <div class="about memberBg">
    <!-- 头部 -->
    <InsideHeader :showUser="true"></InsideHeader>

    <!-- memberIndex -->
    <div class="memberIndex">
      <div class="memberBlock">
        <div class="memberIndexN">
          <div class="memberIndexNC">
            <nuxt-link :to="{name: 'member'}" class="on">个人信息</nuxt-link>
            <nuxt-link :to="{name: 'member-memberInquiry'}">我的问询</nuxt-link>
            <nuxt-link :to="{name: 'member-memberElearning'}">我的elearning</nuxt-link>
            <nuxt-link :to="{name: 'member-collect'}">我的收藏</nuxt-link>
            <nuxt-link :to="{name: 'member-message'}">系统消息</nuxt-link>
            <div class="clear"></div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="memberIndexC">
          <div class="memberIndexC1">
            <div class="memberIndexCtit">
              <em></em>
              <p>账号信息</p>
            </div>
            <div class="memberIndexC1S">
              <div class="memberIndexC1SE">
                <p>
                  账号：
                  <a href="#" v-if="!data.name">未设置，现在设置</a>
                  <span>{{data.name}}</span>
                </p>
                <p>邮箱：{{data.email}}</p>
                <div class="clear"></div>
              </div>
              <div class="memberIndexC1SE">
                <p>手机号：{{data.phone}}</p>
                <p>
                  微信：
                  <a href="#">未绑定，现在绑定</a>
                  <!-- <span>{{data.}}</span> -->
                </p>
                <div class="clear"></div>
              </div>
            </div>
          </div>
          <div class="memberIndexC2">
            <div class="memberIndexCtit">
              <em></em>
              <p>可享受服务</p>
            </div>
            <div class="memberIndexC2C">
              <div class="memberIndexC2CS">
                <img src="../../static/images/memberIndexC2C1.png" class="memberIndexC2CSimg1" />
                <p>资料下载</p>
                <img src="../../static/images/memberIndexC2C3.png" class="memberIndexC2CSimg2" />
              </div>
              <div class="memberIndexC2CS">
                <img src="../../static/images/memberIndexC2C1.png" class="memberIndexC2CSimg1" />
                <p>技术FAQ</p>
                <img src="../../static/images/memberIndexC2C3.png" class="memberIndexC2CSimg2" />
              </div>
              <div class="memberIndexC2CS">
                <img src="../../static/images/memberIndexC2C1.png" class="memberIndexC2CSimg1" />
                <p>认证机构查询</p>
                <img src="../../static/images/memberIndexC2C3.png" class="memberIndexC2CSimg2" />
              </div>
              <div class="memberIndexC2CS">
                <img src="../../static/images/memberIndexC2C1.png" class="memberIndexC2CSimg1" />
                <p>问询与建议</p>
                <img src="../../static/images/memberIndexC2C3.png" class="memberIndexC2CSimg2" />
              </div>
              <div class="memberIndexC2CS">
                <img src="../../static/images/memberIndexC2C1.png" class="memberIndexC2CSimg1" />
                <p>elearning</p>
                <img src="../../static/images/memberIndexC2C3.png" class="memberIndexC2CSimg2" />
              </div>
              <div class="memberIndexC2CS">
                <img src="../../static/images/memberIndexC2C2.png" class="memberIndexC2CSimg1" />
                <p>FATEC培训</p>
                <img src="../../static/images/memberIndexC2C3.png" class="memberIndexC2CSimg2" />
              </div>
              <div class="clear"></div>
            </div>
            <p class="memberIndexC2B">提示：√表示可享受的服务，×表示未享受的服务</p>
          </div>
          <div class="memberIndexC3">
            <div class="memberIndexCtit">
              <em></em>
              <p>个人资料</p>
              <a href="javascript:;" @click="update">修改</a>
              <div class="clear"></div>
            </div>
            <div class="memberIndexC3T" v-if="showInfo">
              <div class="memberIndexC3TE">
                <div class="memberIndexC3TEO">
                  <p>真实姓名</p>
                  <h4>{{sysMemberVo.realName}}</h4>
                </div>
                <div class="memberIndexC3TEO">
                  <p>性别</p>
                  <h4>{{data.sex===0?'男':'女'}}</h4>
                </div>
                <div class="clear"></div>
              </div>
              <div class="memberIndexC3TE">
                <div class="memberIndexC3TEO">
                  <p>
                    手机号
                    <a href="#">修改</a>
                  </p>
                  <h4>{{data.phone}}</h4>
                </div>
                <div class="memberIndexC3TEO">
                  <p>
                    邮箱
                    <a href="#">修改</a>
                  </p>
                  <h4>{{data.email}}</h4>
                </div>
                <div class="clear"></div>
              </div>
              <div class="memberIndexC3TE">
                <div class="memberIndexC3TEO">
                  <p>公司属性</p>
                  <h4>{{sysMemberVo.companyAttributeValue}}</h4>
                </div>
                <div class="memberIndexC3TEO">
                  <p>公司名称</p>
                  <h4>{{sysMemberVo.companyName}}</h4>
                </div>
                <div class="clear"></div>
              </div>
              <div class="memberIndexC3TE">
                <div class="memberIndexC3TEO">
                  <p>职业</p>
                  <h4>{{sysMemberVo.professionFirstName+" " + sysMemberVo.professionSecondName}}</h4>
                </div>
                <div class="memberIndexC3TEO">
                  <p>所属地区</p>
                  <h4>{{sysMemberVo.areaName}}</h4>
                </div>
                <div class="clear"></div>
              </div>
              <div class="memberIndexC3TE">
                <div class="memberIndexC3TEO">
                  <p>行业类别</p>
                  <h4>{{sysMemberVo.industryCategoryValue}}</h4>
                </div>
                <div class="clear"></div>
              </div>
            </div>
            <div class="memberIndexC3F" v-if="!showInfo">
              <div class="memberIndexC3FI">
                <h2>真实姓名</h2>
                <input
                  type="text"
                  placeholder="请填写真实姓名"
                  class="memberIndexC3FIinput"
                  v-model="sysMemberVo.realName"
                />
              </div>
              <div class="memberIndexC3FI">
                <h2>性别</h2>
                <select class="memberIndexC3FIselect" v-model="data.sex">
                  <option value="0">男</option>
                  <option value="1">女</option>
                </select>
              </div>
              <div class="memberIndexC3FI">
                <h2>公司属性</h2>
                <select class="memberIndexC3FIselect" v-model="sysMemberVo.companyAttribute">
                  <option
                    v-for="(item,index) in sysDicChildVos1"
                    :key="index"
                    :value="item.itemCode"
                  >{{item.itemName}}</option>
                </select>
              </div>
              <div class="memberIndexC3FI">
                <h2>公司名称</h2>
                <input
                  type="text"
                  placeholder="请填写公司名称"
                  class="memberIndexC3FIinput"
                  v-model="sysMemberVo.companyName"
                />
              </div>
              <div class="memberIndexC3FI">
                <h2>职业</h2>
                <div class="memberIndexC3FIS">
                  <select
                    class="memberIndexC3FISl"
                    v-model="professionFirstOid"
                    @change="getSecondvalue"
                  >
                    <option
                      v-for="(item,index) in professionInfoVos"
                      :key="index"
                      :value="item.oid"
                    >{{item.professionName}}</option>
                  </select>
                  <select class="memberIndexC3FISr" v-model="sysMemberVo.professionSecondOid">
                    <option
                      v-for="(item,index) in professionSecond"
                      :key="index"
                      :value="item.oid"
                    >{{item.professionName}}</option>
                  </select>
                  <div class="clear"></div>
                </div>
              </div>
              <div class="memberIndexC3FI">
                <h2>所属地区</h2>
                <select class="memberIndexC3FIselect" v-model="sysMemberVo.areaid">
                  <option
                    v-for="(item,index) in provinceVos"
                    :key="index"
                    :value="item.provinceCode"
                  >{{item.provinceName}}</option>
                </select>
              </div>
              <div class="memberIndexC3FI">
                <h2>行业类别</h2>
                <select class="memberIndexC3FIselect" v-model="sysMemberVo.industryCategoryOid">
                  <option
                    v-for="(item,index) in sysDicChildVos2"
                    :key="index"
                    :value="item.itemCode"
                  >{{item.itemName}}</option>
                </select>
              </div>
              <div class="clear"></div>
              <div class="memberIndexC3FI">
                <input type="submit" value="完善信息" class="memberIndexC3FIsub" @click="save" />
              </div>
              <div class="clear"></div>
            </div>
          </div>
          <!-- <div class="memberIndexC4">
            <div class="memberIndexCtit">
              <em></em>
              <p>申请服务</p>
              <a href="#">修改</a>
              <div class="clear"></div>
            </div>
            <div class="memberIndexC4T">
              <div class="memberIndexC4TE">
                <div class="memberIndexC4TET">
                  *可享受的培训服务：
                  <label>
                    <input type="checkbox" /> e-Learning（在线学习）
                  </label>
                  <label>
                    <input type="checkbox" /> FATEC(培训课程)
                  </label>
                </div>
                <p class="memberIndexC4TEB">*申请FATEC服务，您需要等待管理员审核，通过审核即可享受在线报名FATEC培训课程</p>
              </div>
              <div class="memberIndexC4TE">
                <div class="memberIndexC4TET">
                  *您的工作年限为：
                  <label>
                    <input type="radio" name="year" /> 1年一下
                  </label>
                  <label>
                    <input type="radio" name="year" /> 1~3年
                  </label>
                  <label>
                    <input type="radio" name="year" /> 3~5年
                  </label>
                  <label>
                    <input type="radio" name="year" /> 5年以上
                  </label>
                </div>
              </div>
              <div class="memberIndexC4TE">
                <div class="memberIndexC4TET">
                  *感兴趣的产品课程：
                  <label>
                    <input type="checkbox" /> 可编程控制器课程
                  </label>
                </div>
              </div>
            </div>
            <div class="memberIndexC3F">
              <div class="memberIndexC3FI">
                <h2>公司地址</h2>
                <select class="memberIndexC3FIselect">
                  <option>上海</option>
                </select>
              </div>
              <div class="memberIndexC3FI">
                <h2>邮政编码</h2>
                <input type="text" placeholder="请填写邮编" class="memberIndexC3FIinput" />
              </div>
              <div class="memberIndexC3FI">
                <h2>联系电话</h2>
                <input type="text" placeholder="请填写联系电话" class="memberIndexC3FIinput" />
              </div>
              <div class="memberIndexC3FI">
                <h2>传真号码</h2>
                <input type="text" placeholder="请填写邮编" class="memberIndexC3FIinput" />
              </div>
              <div class="clear"></div>
              <div class="memberIndexC3FI">
                <input type="submit" value="请填写传真" class="memberIndexC3FIsub" />
              </div>
              <div class="clear"></div>
            </div>
          </div>-->
          <a href="#" class="memberIndexC5">点此永久注册账户</a>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <HomeHooter></HomeHooter>
  </div>
</template>

<script>
import $ from "jquery";
import "@/assets/css/home.css";
import "@/assets/css/member.css";
import InsideHeader from "@/components/headuser";
import HomeHooter from "@/components/footer";
import Qs from "qs";

export default {
  name: "member",
  data() {
    return {
      data: {},
      sysMemberVo: {},
      provinceVos: {},
      sysDicChildVos2: {},
      sysDicChildVos1: {},
      professionInfoVos: "",
      professionFirstOid: 0,
      professionSecond: [],
      showInfo: true,
      userInfo: {}
    };
  },
  components: {
    InsideHeader,
    HomeHooter
  },
  methods: {
    // 公司属性
    getCommon() {
      let id = this.$axios;
      this.$api.homeindex.getCommon(id).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.provinceVos = result.data.provinceVos;
          this.sysDicChildVos2 = result.data.sysDicChildVos2;
          this.sysDicChildVos1 = result.data.sysDicChildVos1;
          this.professionInfoVos = result.data.professionInfoVos;
          this.getuserInfo();
        }
      });
    },
    // 个人信息
    getuserInfo() {
      let id = this.$axios,
        params = {
          userOid:this.userId
        };
      params = Qs.stringify(params);
      this.$api.homeindex.getUserData(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.data = result.data;
          this.sysMemberVo = result.data.sysMemberVo;
          this.professionFirstOid = result.data.sysMemberVo.professionFirstOid;
        }
      });
    },

    // 职业一级值改变
    getSecondvalue(val) {
      this.professionInfoVos.map((res, index) => {
        if (res.oid === this.professionFirstOid) {
          this.professionSecond = this.professionInfoVos[
            index
          ].professionInfoVos;
        }
      });
    },

    // 修改
    update() {
      this.showInfo = false;
    },

    // 更新个人资料
    save() {
      let id = this.$axios,
        params = {
          userOid: "4028818d6ec93de2016ec94c1ec10094",
          realName: this.sysMemberVo.realName,
          sex: this.data.sex,
          companyAttribute: this.sysMemberVo.companyAttribute,
          companyName: this.sysMemberVo.companyName,
          professionFirstOid: this.sysMemberVo.professionFirstOid,
          professionSecondOid:
            this.professionSecond.length !== 0
              ? this.sysMemberVo.professionSecondOid
              : "",
          areaid: this.sysMemberVo.areaid,
          industryCategoryOid: this.sysMemberVo.industryCategoryOid
        };
      params = Qs.stringify(params);
      this.$api.homeindex.updateUserData(id, params).then(res => {
        let result = res.data;
        if (result.code === 1) {
          this.$message({
            type: "success",
            message: result.msg
          });
          this.showInfo = true;
        } else {
          this.$message({
            type: "warning",
            message: result.msg
          });
        }
      });
    }
  },
  mounted() {
    var userId;
    let _this=this;
    if (window) {
     userId=window.sessionStorage.getItem("userInfo");
    }
    if (userId) {
      this.userId = userId;
      this.getCommon()
    }else{
      _this.$router.push("/enroll");
    }
  }
};
</script>

<style scoped>
</style>